<template>
  <div class="ticket">
    <div class="ticket-header">
      <div class="back" @click="back"><van-icon name="arrow-left" /></div>
      大额券热卖清单
    </div>
    <div class="ticket-banner">
      <img
        src="https://img.alicdn.com/imgextra/i1/2053469401/O1CN01goVGhk2JJi10KtmIu_!!2053469401.png"
        alt=""
      />
    </div>
    <div class="ticket-tab">
      <van-tabs
        background="transparent"
        title-inactive-color="hsla(0,0%,100%,.6)"
        title-active-color="white"
        animated
        @click="onClick"
      >
        <van-tab
          v-for="item in ticketTabs"
          :key="item.id"
          :title="item.cateName"
          :name="item.id"
        >
          <div class="ticket-products">
            <div
              class="ticket-product"
              v-for="item in ticketList"
              :key="item.id"
            >
              <div class="ticket-product-img">
                <img :src="item.pic" alt="" />
              </div>
              <div class="ticket-product-info">
                <div class="title">
                  <span class="logo">
                    <img
                      src=""
                      alt=""
                    />
                  </span>
                  <span class="title-content">{{ item.title }}</span>
                </div>
                <div class="quan">
                  <span>券</span>
                  {{ item.quanJine }}元
                </div>
                <div class="price">
                  <span class="price-label1">¥</span>
                  <span class="price-label2">{{ item.jiage }}</span>
                  <span class="price-label1">活动价</span>
                  <span class="price-label3">¥{{ item.yuanjia }}</span>
                </div>
                <div class="shop" v-if="item.ditittle">{{ item.dtitle }}</div>
                <div class="shop" v-if="item.shopName">{{ item.shopName }}</div>
                <div class="buy">
                  <span class="go">
                    去购买
                    <van-icon name="arrow" />
                  </span>
                  <span class="people"
                    >{{
                      item.xiaoliang > 10000
                        ? parseInt(item.xiaoliang / 1000) / 10 + "万"
                        : item.xiaoliang
                    }}人已购</span
                  >
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const store = useStore();
    const router = useRouter();

    const ticketList = computed(() => store.state.ticket.ticketList);
    const back = () => {
      router.back();
    };
    const ticketTabs = computed(() => store.state.ticket.ticketTabs);
    const getTicketList = (categoryId: string) =>
      store.dispatch({
        type: "ticket/getTicketList",
        categoryId,
      });
    const onClick = (name: string): void => {
      getTicketList(name);
    };
    onMounted(() =>
      store.dispatch({
        type: "ticket/getTicketTabs",
      })
    );
    return {
      back,
      ticketList,
      ticketTabs,
      onClick,
    };
  },
});
</script>

<style lang="stylus" scoped>
.ticket
    font-size .12rem
    background url("https://cmsstatic.ffquan.cn/dist/static/header_bg.747dcea0.png") 0 -2.8rem no-repeat
    margin-top 0px
    background-color #eee
    .ticket-header
        position fixed
        top 0
        width 100%
        height .45rem
        line-height .45rem
        text-align center
        font-size .18rem
        color white
        background rgb(189, 0, 255)
        z-index 100
        .back
            position absolute
            left .1rem
            top .02rem
    .ticket-banner
        width 3.45rem
        height 1.26rem
        overflow hidden
        border-radius .05rem
        margin 0 auto
        padding-top .46rem
        img
            width 100%
            height 100%
    .ticket-tab
        /deep/ .van-tabs__nav
            height 0.4rem
            .van-tabs__line
                background white
                width 35px
                bottom 20px
            .van-tab
                font-size .15rem
        .ticket-products
            padding 0 .1rem
            .ticket-product
                background white
                border-radius .1rem
                padding .1rem
                margin-bottom .1rem
                height 1.1rem
                box-sizing border-box
                .ticket-product-img
                    float left
                    width 0.92rem
                    height 0.92rem
                    overflow hidden
                    border-radius .05rem
                    img
                        width 100%
                        height 100%
                .ticket-product-info
                    padding-left .1rem
                    position relative
                    float left
                    .title
                        display flex
                        align-items center
                        height .18rem
                        font-size .13rem
                        color #333
                        line-height .18rem
                        overflow hidden
                        text-overflow ellipsis
                        white-space nowrap
                        margin-bottom .13rem
                        box-sizing border-box
                        .title-content
                            width 2rem
                            overflow hidden
                            text-overflow ellipsis
                            white-space nowrap
                            margin-left .05rem
                        .logo
                            width .23rem
                            height .13rem
                            img
                                width 100%
                                height 100%
                    .quan
                        display flex
                        box-sizing border-box
                        align-items center
                        line-height .12rem
                        padding 0 .03rem 0 .01rem
                        font-size .095rem
                        color #fff
                        width max-content
                        height .12rem
                        background linear-gradient(90deg,#ff8873,#ff4f4f)
                        border-radius .02rem
                        span
                            font-size .09rem
                            color #ff5351
                            line-height .095rem
                            padding 1px .02rem
                            background #fff
                            border-radius .01rem 0 0 .01rem
                            text-align center
                            margin-right .03rem
                    .price
                        margin .08rem 0 .04rem
                        .price-label1
                            font-size .1rem
                            color #fe3738
                        .price-label2
                            color #fe3738
                            font-size .17rem
                            margin 0 .02rem
                        .price-label3
                            font-size .1rem
                            color #888
                            text-decoration line-through
                            margin-left .02rem
                    .shop
                        color #888888
                        font-size .11rem
                    .buy
                        width .8rem
                        height .34rem
                        background linear-gradient(90deg,#d65dff,#fe4aeb)
                        box-shadow 0 0.02rem 0.03rem 0 rgb(235 73 251 / 25%)
                        border-radius 1rem .03rem .02rem 1rem
                        position absolute
                        bottom .06rem
                        right -.2rem
                        border 1px solid transparent
                        z-index 1
                        padding-left .14rem
                        display flex
                        flex-direction column
                        justify-content center
                        box-sizing border-box
                        color white
                        font-size .1rem
                        .go

                        .people
                            width 120%
                            transform scale(.8)
</style>
